<template>
  <div>
    <div ref="chartRef" style="width: 100%; height: 400px"></div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, reactive, Ref } from "vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useECharts } from "/@/hooks/web/useECharts"
  import { GaugeChart } from "echarts/charts"

  const props = defineProps({ data: {} })
  const dataSource = ref([])
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>)
  const loading = ref(false)
  const { createMessage } = useMessage()
  const option = reactive({
    series: [
      {
        type: "gauge",
        progress: {
          show: true,
          width: 18,
        },
        axisLine: {
          lineStyle: {
            width: 18,
          },
        },
        axisTick: {
          show: true,
        },
        splitLine: {
          length: 15,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        axisLabel: {
          distance: 25,
          color: "#999",
          fontSize: 15,
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 25,
          itemStyle: {
            borderWidth: 10,
          },
        },
        title: {},
        detail: {
          valueAnimation: true,
          fontSize: 50,
          formatter: "{value}%",
          offsetCenter: [0, "80%"],
        },
        data: [
          {
            value: 70,
            name: "本地磁盘",
          },
        ],
      },
    ],
  })

  function initCharts() {
    option.series[0].data[0].name = props.data.name
    option.series[0].data[0].value = props.data.restPPT
    setOptions(option)
  }

  onMounted(() => {
    console.info(props.data)
    echarts.use(GaugeChart)
    initCharts()
  })
</script>
